<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: 10171
  Date: 2020/9/29
  Time: 21:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css/"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css/"/>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>

<head>
    <title>学生成绩管理系统</title>
</head>
<body>
<div>
    <shiro:hasAnyRoles name="t_teacher,m_teacher">
        <button class="button" onclick="addSC()" >添加学生成绩信息</button>
    </shiro:hasAnyRoles>
</div>
<div class="margin">
    <table class="table">
        <thead>
        <tr>
            <td>成绩编号</td>
            <td>学号</td>
            <td>学生名</td>
            <td>课程编号</td>
            <td>课程名</td>
            <td>成绩</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" select="selected">2</option>
    <option value="5">5</option>
    <option value="10">10</option>
</select> 条数据，当前是第<span id="currentPageSpan"></span> 页，
    总共<span id="totalPageSpan" onchange="AllPage()"></span>页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastpage()">尾页</button>
</div>
<%--这里的div做一个编辑班级信息的模态框--%>
<div class="modal" id="editModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>学生成绩编辑</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">学生编号</label>
                <input class="form-control" type="text" id="studentIdInput" placeholder="请输入课程编号"></br>
                <label class="control-label">学生名</label>
                <input class="form-control" type="text" id="studentNameInput" placeholder="请输入学生名"></br>
                <label class="control-label">课程编号</label>
                <input class="form-control" type="text" id="courseIdInput" onkeyup="selectNum1" value="num" placeholder="请输入课程编号" ></br>
                <label class="control-label">课程名</label>
                <input class="form-control" type="text" id="courseInput" placeholder="请输入课程名"></br>
                <label class="control-label">成绩</label>
                <input class="form-control" type="text" id="scoreInput" placeholder="请输入成绩"></br>
                <input type="hidden" id="scIdInput">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="addModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>学生成绩添加</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">学生编号</label>
                <input class="form-control" type="text" id="studentIdInputAdd" placeholder="请输入学生编号" onchange="getStuDetail()"></br>
                <label class="control-label">学生名</label>
                <input class="form-control" type="text" id="studentNameInputAdd" placeholder="请输入学生名"></br>
                <label class="control-label">课程编号</label>
                <input class="form-control" type="text" id="courseIdInputAdd"  value="num" placeholder="请输入课程编号" ></br>
                <label class="control-label">课程名</label>
                <select class="form-control" type="text" id="courseInputAdd"  placeholder="请输入课程名" onchange="selectNum()">
                    <option value="" selected="selected">--请选择课程名--</option>
                    <c:forEach  items="${coursemap}" var="cc">
                        <option value="${cc.id}"> ${cc.name}</option>
                    </c:forEach>
                </select></br>
                <label class="control-label">成绩</label>
                <input class="form-control" type="text" id="scoreInputAdd" placeholder="请输入成绩"></br>
                <input type="hidden" id="scIdInputAdd">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="addConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    /*分页模块*/
    var currentPage=1;
    var pageSize=2;
    var totalPage;
    $(function(){
        //scLoadList();
        scLoadListByPage();
    });
    function AllPage() {
        pageSize=$("#currentPageSpan").val();
        scLoadListByPage();
    }
    //用户修改的每页记录数
    function onSelectChange() {
        pageSize=$("#pageSizeSelect").val();
        currentPage=1;
        scLoadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage=1;
        scLoadListByPage();
    }
    //上一页的回调方法
    function prePage() {
        currentPage--;
        if (currentPage<1){
            currentPage=1;
        }
        scLoadListByPage();
    }
    //下一页
    function nextPage() {
        currentPage++;
        if (currentPage>totalPage){
            currentPage=totalPage;
        }
        scLoadListByPage();
    }
    function lastpage() {
        currentPage=totalPage;
        scLoadListByPage();

    }

    function  showSCList(scList){
        //console.log(JSON.stringify(scList));
        var html='';
        for (let i = 0; i <scList.length; i++) {
            let  item =scList[i];
            console.log(JSON.stringify(item));
            html+="<tr>";
            html+="<td>"+item.id+"</td>";
            html+="<td>"+item.student.id+"</td>";
            html+="<td>"+item.student.name+"</td>";
            if(item.course != null){
                html+="<td>"+item.course.id+"</td>";
                html+="<td>"+item.course.name+"</td>";
            }else {
                html+="<td></td>";
                html+="<td></td>";
            }
            if(item.score != null) {
                html += "<td>" + item.score + "</td>";
            }else {
                html += "<td></td>";
            }
            html+="<td><shiro:hasAnyRoles name='t_teacher,m_teacher'><button class='button' onclick='getOneDetail(\"" + item.id + "\")'>编辑</button>" +
                "<button class='button' onclick='deleteOneClass(\"" + item.id + "\")'>删除</button></shiro:hasAnyRoles></td>";
            html+="</tr>";
        }
        $("#tb").html(html);
    }
    function scLoadList() {
        $.ajax({
            url:"${pageContext.request.contextPath}/sc/getSCList",
            type:"get",
            dataType:"json",
            success:function (result) {
                if (result.code==0){
                    showSCList(result.scList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function scLoadListByPage(){
        var role = '${sessionScope.user.role.keyword}';
        var id = '${sessionScope.user.id}';
     $.ajax({
         url:"${pageContext.request.contextPath}/sc/getSCListByPage",
         type:"get",
         data:{
             "currentPage":currentPage,
             "pageSize":pageSize,
             role:role,
             id:id
         },
         dataType: "json",
         success:function (result) {
             if (result.code==0){
                 showSCList(result.scList);
                 totalPage=result.totalPage;
                 $("#totalPageSpan").html(totalPage);
                 $("#currentPageSpan").html(currentPage);
             }
         },
         error:function (err) {
             console.log(JSON.stringify(err));
         }
     });
    }
    function addSC() {
        showEditModal();
    }
    /*课程下拉框自动获取课程id*/
    function selectNum() {
        var numbers=$("#courseInputAdd").val();
        $("#courseIdInputAdd").val(numbers);
    }
    /*获取学生id，name*/
    function getStuDetail() {
        var inputStuIdValue=$("#studentIdInputAdd").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/student/someStu",
            type:"get",
            dataType:"json",
            data:{id:inputStuIdValue},
            success:function (result) {
                if (result.code==0){
                    $("#studentNameInputAdd").val(result.student.name);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function getOneDetail(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/sc/gerOneSC",
            type:"get",
            data: {"id":id},
            dataType:"json",
            success:function (result) {
                if (result.code==0){
                    //弹出编辑模态框
                    showEditModal(result.scSet);
                }else {
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    //显示编辑模态框
    function showEditModal(scSet) {
        if (scSet!=null){
            $("#scIdInput").val(scSet.id)
            $("#studentIdInput").val(scSet.student.id);
            $("#studentNameInput").val(scSet.student.name);
            $("#courseIdInput").val(scSet.course.id);
            $("#courseInput").val(scSet.course.name);
            $("#scoreInput").val(scSet.score);
            $("#studentIdInput").attr("disabled","disabled");
            $("#studentNameInput").attr("disabled","disabled");
            $("#courseIdInput").attr("disabled","disabled");
            $("#courseInput").attr("disabled","disabled");
            $("#editModal").modal("show");
        }else {
            //数据归0
            $("#scIdInputAdd").val(0)
            $("#studentIdInputAdd").val("");
            $("#studentNameInputAdd").val("");
            $("#courseIdInputAdd").val("");
            $("#courseInputAdd").val("");
            $("#scoreInputAdd").val("");
            $("#addModal").modal("show");
        }
    }
    function editConfirm(){
        var scIdValue= $("#scIdInput").val()
        var stuIdValue= $("#studentIdInput").val();
        var stuNameValue=$("#studentNameInput").val();
        var courseIdValue= $("#courseIdInput").val();
        var courseNameValue=$("#courseInput").val();
        var scoreValue=$("#scoreInput").val();
        var studentValue={stuIdValue,stuNameValue};
        var courseValue={courseIdValue,courseNameValue};
        var dataValue = {id:scIdValue, student:studentValue,course:courseValue,score:scoreValue};
        $.ajax({
            url: '${pageContext.request.contextPath}/sc/edit',
            type: 'post', //使用post提交大量数据
            contentType: 'application/json', //指明是个json格式请求参数
            data:JSON.stringify(dataValue), //传递用户编辑后的信息,这里必须是字符串
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态编辑框
                    scLoadListByPage();
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function addConfirm(){
        var scIdValue= $("#scIdInputAdd").val()
        var stuIdValue= $("#studentIdInputAdd").val();
        var stuNameValue=$("#studentNameInputAdd").val();
        var courseIdValue= $("#courseIdInputAdd").val();
        var courseNameValue=$("#courseInputAdd").children("option:selected").html();
        var scoreValue=$("#scoreInputAdd").val();
        var studentValue={stuIdValue,stuNameValue};
        var Value={courseIdValue,courseNameValue};
        var dataValue = {id:scIdValue, student:studentValue,course:courseValue,score:scoreValue};

        $.ajax({
            url: '${pageContext.request.contextPath}/sc/add',
            type: 'post', //使用post提交大量数据
            contentType: 'application/json', //指明是个json格式请求参数
            data:{
                studentId:stuIdValue,
                courseId:courseIdValue,
                score:scoreValue
            }, //传递用户编辑后的信息,这里必须是字符串
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //再次分页加载数据并显示在页面上
                    $("#addModal").modal("hide");//关闭模态编辑框
                    scLoadListByPage();
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
</script>
</body>
</html>
